<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>账单查看</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>
    <style>
        .layui-form{
            padding: 20px 50px;
        }
    </style>
</head>

<body>
<form class="layui-form layui-form-pane">
    <div class="layui-form-item" lay-filter="bill-form">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title"  disabled="disabled"  lay-verify="required" placeholder="请输入消费内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">支出类型</label>
        <div class="layui-input-block">
            <select name="extypeid" lay-verify="extype" disabled="disabled"  id="extype">
                <option value="-1">请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">支出时间</label>
        <div class="layui-input-block">
            <input class="layui-input" placeholder="支出时间" id="time" name="time" autocomplete="off"  disabled="disabled" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">金额</label>
        <div class="layui-input-block">
            <input type="text" name="money" lay-verify="required|number"  disabled="disabled"  placeholder="请输入消费金额" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">支付方式</label>
        <div class="layui-input-block">
            <select name="paywayid" lay-verify="payway" id="payway"  disabled="disabled" >
                <option value="-1">请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="margin-left: 0;">
            <textarea name="remark" placeholder="说点什么？" class="layui-textarea" autocomplete="off"  disabled="disabled" ></textarea>
        </div>
    </div>
    <input type="hidden" name="typeid" value="1">
    <input type="hidden" name="id">
</form>
<script>
    $(function () {
        layer = layui.layer;
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#time', //指定元素
                max: 0
            });
        });
    });
    getAllPayways();
    getAllExtypes();
    var url = location.href;
    if (url.indexOf("#2")!=-1){
        $("button[lay-filter=update]").css("display","block");
        var index = getQueryString("index");
        console.log(parent.document.getElementsByTagName("tr")[index]);
        initForm(parent.document.getElementsByTagName("tr")[index]);
    }else {
        $("button[lay-filter=add]").css("display","block");
    }

    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;


        //自定义验证规则
        form.verify({
            payway: function(value){
                if(value == -1){
                    return '请选择支付方式';
                }
            },
            extype: function(value){
                if(value == -1){
                    return '请选择支出类型';
                }
            }
        });


    });

    function initForm(tr) {
        console.log(tr);
        $("input[name=title]").val($(tr).find(":nth-child(2)").html());
        $("input[name=money]").val($(tr).find(":nth-child(5)").html());
        $("input[name=time]").val($(tr).find(":nth-child(8)").html());
        var payway = $(tr).find(":nth-child(6)").html();
        var extype = $(tr).find(":nth-child(3)").html();
        $("#payway").find("option:contains("+payway+")").prop("selected",true);
        $("#extype").find("option:contains("+extype+")").prop("selected",true);
        $("textarea[name=remark]").val($(tr).find(":nth-child(7)").html());
        $("input[name=id]").val($(tr).find(":nth-child(9)").html());
    }
</script>
</body>

</html>